<!--
 * @Author: 偻儸小卒[EdisonLiu_]
 * @Date: 1970-01-01 08:00:00
 * @LastEditors: 偻儸小卒[EdisonLiu_]
 * @LastEditTime: 2020-04-17 17:25:04
 * @Description: 
 -->
<template>
  <commonPage :showHeader="true" :header_title="header_title">
    <div slot="page_body">
      <div class="page_body">
        <matchInc class="match_lists" :match="match_item" />

        <div class="match_detail">
          <div class="check_buttons">
            <button
              :class="
                detail_index == 1 ||
                (detail_index == 3 && check_disabled == true)
                  ? 'active'
                  : ''
              "
              @click="detail_index = 1"
            >
              赛事介绍
            </button>
            <button
              :class="detail_index == 2 ? 'active' : ''"
              @click="detail_index = 2"
            >
              活动要求
            </button>
            <button
              :disabled="check_disabled"
              :class="
                detail_index == 3 && check_disabled == false ? 'active' : ''
              "
              @click="detail_index = 3"
            >
              我要报名
            </button>
          </div>
          <div
            class="match_detail_cont"
            v-if="
              detail_index == 1 || (detail_index == 3 && check_disabled == true)
            "
          >
            <div class="article" v-html="match_item.introduce"style="line-height:26px;font-size:1rem"></div>
          </div>
          <div class="match_detail_cont" v-if="detail_index == 2">
            <div class="article" v-html="match_item.requirement" ></div>
          </div>
          <div
            class="match_detail_cont"
            v-if="detail_index == 3 && check_disabled == false"
          >
            <!-- <div class="on_signed" v-if="match_item.me_sign_up_pay == 1">
              <div>您已报名</div>
              <router-link to="/" tag="button" class="btn btn-default"
                >查看报名记录</router-link
              >
            </div> -->

            <form
              
              @submit="submitQueue($event)"
            >
              <div>
                <ul>
                  <li v-if="match_item.sign_field.realname == 1">
                    <label :class="err.realname == 1 ? 'err' : ''">
                      <span><b style="color:red">*</b>姓名</span>
                      <input
                        v-model="queue.realname"
                        placeholder="请输入您的姓名"
                        @focus="onFocus"
                        @blur="
                          changeBlur();
                          verify_form().realname();
                        "
                        ref="queue_realname"
                      />
                    </label>
                  </li>
                  <li v-if="match_item.sign_field.grade != 0">
                    <label :class="err.grade != 0 ? 'err' : ''">
                      <span v-if="match_item.sign_field.grade==3"><b style="color:red">*</b>年龄/组别</span>
                      <span v-else-if="match_item.sign_field.grade==4"><b style="color:red">*</b>年龄/组别</span>
                      <span v-else><b style="color:red">*</b>年级</span>
                      <select v-if="match_item.sign_field.grade==1" v-model="queue.grade" @focus="onFocus" @blur="changeBlur();verify_form().grade()" ref="queue_grade">
                        <option value="">请选择</option>
                        <option value="二年级">二年级</option>
                        <option value="三年级">三年级</option>
                        <option value="四年级">四年级</option>
                        <option value="五年级">五年级</option>
                        <option value="六年级">六年级</option>
                        <option value="七年级">七年级</option>
                        <option value="八年级">八年级</option>
                        <option value="九年级">九年级</option>
                      </select>
                      <select v-if="match_item.sign_field.grade==2" v-model="queue.grade" @focus="onFocus" @blur="changeBlur();verify_form().grade()" ref="queue_grade">
                        <option value="">请选择</option>
                        <option value="三年级">三年级</option>
                        <option value="四年级">四年级</option>
                        <option value="五年级">五年级</option>
                        <option value="六年级">六年级</option>
                        <option value="七年级">七年级</option>
                        <option value="八年级">八年级</option>
                        <option value="九年级">九年级</option>
                      </select>
                      <select v-if="match_item.sign_field.grade==3" v-model="queue.grade" @focus="onFocus" @blur="changeBlur();verify_form().grade()" ref="queue_grade">
                        <option value="">请选择</option>
                        <option value="土豆组">土豆组(3-6岁)</option>
                        <option value="杏花组">杏花组(7-9岁)</option>
                        <option value="丰收组">丰收组(10-12岁)</option>
                        <option value="星空组">星空组(13-17岁)</option>
                      </select>
                      <select v-if="match_item.sign_field.grade==4" v-model="queue.grade" @focus="onFocus" @blur="changeBlur();verify_form().grade()" ref="queue_grade">
                        <option value="">请选择</option>
                        <option value="儿童业余A组">儿童业余A组(7岁以下)</option>
                        <option value="儿童业余B组">儿童业余B组(7-8岁)</option>
                        <option value="儿童业余C组">儿童业余C组(9-10岁)</option>
                        <option value="儿童专业D组">儿童专业D组(10-12岁)</option>
                        <option value="儿童业余D组">儿童业余D组(11-12岁)</option>
                        <option value="少年专业A组">少年专业A组(13-15岁)</option>
                        <option value="少年业余A组">少年业余A组(13-15岁)</option>
                        <option value="少年专业B组">少年专业B组(16-18岁)</option>
                        <option value="少年业余B组">少年业余B组(16-18岁)</option>
                        <option value="青年专业组">青年专业组(18-35岁)</option>
                        <option value="青年业余组">青年业余组(18-35岁)</option>
                      </select>
                      <!-- <input
                        v-model="queue.grade"
                        placeholder="请输入您的年级"
                        @blur="
                          changeBlur();
                          verify_form().grade();
                        "
                        @focus="onFocus"
                        ref="queue_grade"
                      /> -->
                    </label>
                  </li>
                  <li v-if="match_item.sign_field.school == 1">
                    <label :class="err.school == 1 ? 'err' : ''">
                      <span><b style="color:red">*</b>就读学校</span>
                      <input
                        v-model="queue.school"
                        placeholder="请填写学校全称"
                        @blur="
                          changeBlur();
                          verify_form().school();
                        "
                        ref="queue_school"
                      />
                    </label>
                  </li>
                  <li v-if="match_item.sign_field.instructor == 1">
                    <label >
                      <span>指导教师</span>
                      <input
                        v-model="queue.instructor"
                        placeholder="须填写指导教师全名"
                        @blur="
                          changeBlur();
                        "
                        @focus="onFocus"
                        ref="queue_instructor"
                      />
                    </label>
                  </li>
                  <li v-if="match_item.sign_field.entries == 1">
                    <label :class="err.entries == 1 ? 'err' : ''">
                      <span><b style="color:red">*</b>参赛曲目</span>
                      <input
                        v-model="queue.entries"
                        placeholder="请输入参赛曲目"
                        @blur="
                          changeBlur();
                          verify_form().entries();
                        "
                        @focus="onFocus"
                        ref="queue_entries"
                      />
                    </label>
                  </li>
                  <li
                    v-if="
                      match_item.sign_field.training_place == 1 &&
                        this.mechanism_id == 0
                    "
                  >
                    <label>
                      <span>培训机构</span>
                      <input
                        v-model="queue.training_place"
                        placeholder="请输入您的校外培训机构"
                        @blur="
                          changeBlur();
                        "
                        @focus="onFocus"
                        ref="queue_training_place"
                      />
                    </label>
                  </li>

                  <li v-if="this.mechanism_id > 0">
                    <label >
                      <span>培训机构</span>
                      <input v-model="mechanism.username" readonly />
                    </label>
                  </li>
                  <li v-if="match_item.sign_field.phone == 1">
                    <label :class="err.phone == 1 ? 'err' : ''">
                      <span><b style="color:red">*</b>联系电话</span>
                      <input
                        type="text"
                        v-model="queue.phone"
                        placeholder="请输入您的联系电话"
                        @blur="
                          changeBlur();
                          verify_form().phone();
                        "
                        @focus="onFocus"
                        ref="queue_phone"
                      />
                    </label>
                  </li>
                  <li v-if="match_item.sign_field.address == 1">
                    <label :class="err.address == 1 ? 'err' : ''">
                      <span><b style="color:red">*</b>家庭住址</span>
                      <input
                        v-model="queue.address"
                        v-if="match_id==24" placeholder="方便邮寄荣誉证书、参赛证"
                        @blur="
                          changeBlur();
                          verify_form().address();
                        "
                        @focus="onFocus"
                        ref="queue_address"
                      />
                      <input
                        v-model="queue.address"
                        v-else placeholder="方便邮寄荣誉证书、参赛证"
                        @blur="
                          changeBlur();
                          verify_form().address();
                        "
                        @focus="onFocus"
                        ref="queue_address"
                      />
                    </label>
                  </li>

                  <li v-if="match_id==24">
                    <label>
                      <span>作品简介</span>
                      <input
                        v-model="queue.introduce"
                        placeholder="可不填写"
                        @blur="
                          changeBlur();
                        "
                        @focus="onFocus"
                        ref="queue_introduce"
                      />
                    </label>
                  </li>
                  <li v-if="match_item.sign_field.height == 1">
                    <label >
                      <span>身高</span>
                      <input
                        type="number"
                        v-model="queue.height"
                        placeholder="请输入您的身高"
                        @blur="
                          changeBlur();
                        "
                        @focus="onFocus"
                        ref="queue_height"
                      />
                    </label>
                  </li>
                  <li v-if="match_item.sign_field.household_register == 1">
                    <label >
                      <span>户籍</span>
                      <input
                        v-model="queue.household_register"
                        @blur="
                          changeBlur();
                        "
                        @focus="onFocus"
                        placeholder="请输入您的户籍"
                        ref="queue_household_register"
                      />
                    </label>
                  </li>
                  <li v-if="match_item.sign_field.sex == 1">
                    <label>
                      <span>性别</span>
                      <label class="sex_select">
                        <popup-picker
                          title=""
                          @on-change="change_sex"
                          :data="sex_options"
                          v-model="sex_txt"
                          value-text-align="left"
                        >
                        </popup-picker
                        ><x-icon class="icon" type="ios-arrow-down"></x-icon>
                      </label>
                    </label>
                  </li>
                  <!-- <li>
                    <label :class="err.sex == 1 ? 'err' : ''">
                      <span>性别</span>
                      <input
                        v-model="queue.sex"
                        placeholder="请输入您的性别"
                        @blur="
                          changeBlur();
                          verify_form().sex();
                        "
                        @focus="onFocus"
                        ref="queue_sex"
                      />
                    </label>
                  </li> -->
                  <li v-if="match_item.sign_field.accompany == 1">
                    <label >
                      <span>陪同人员</span>
                      <input
                        v-model="queue.accompany"
                        placeholder="请输入您的陪同人员"
                        @blur="
                          changeBlur();
                        "
                        @focus="onFocus"
                        ref="queue_accompany"
                      />
                    </label>
                  </li>
                  <li v-if="match_item.sign_field.accompany_phone == 1">
                    <label >
                      <span>陪同人员电话</span>
                      <input
                        v-model="queue.accompany_phone"
                        placeholder="请输入您的陪同人员电话"
                        @blur="
                          changeBlur();
                        "
                        @focus="onFocus"
                        ref="queue_accompany_phone"
                      />
                    </label>
                  </li>
                  <li class="upload_input" v-if="match_item.sign_field.works==1">
                    <span>上传作品(照片大小不能超过10MB)</span>
                    <van-uploader
                      v-model="fileList"
                      :after-read="afterRead"
                      :before-read="beforeRead"
                      :max-count="8"
                      multiple="true"
                      accept="image/*"
                      max-size="10485760"
                      @oversize="oversize"
                    />
                  </li>

                  <li>
                    <input type="submit" value="提 交" />
                  </li>
                </ul>
              </div>
            </form>
          </div>
        </div>
      </div>

      <van-overlay :show="show_loading">
        <div class="wrapper">
          <van-loading type="spinner" color="#1989fa" />
        </div>
      </van-overlay>
    </div>
  </commonPage>
</template>
<script>
import commonPage from "../common/commonPage";
import matchInc from "../plugin/match_inc";
export default {
  name: "match_detail",
  data() {
    return {
      url:'',
      share_url:'',
      header_title: "赛事详情",
      detail_index: 3,
      sex_txt: ["男"],
      sex_options: [["男", "女"]],
      queue: {
        realname: "",
        grade: "",
        school: "",
        instructor: "",
        training_place: "",
        phone: "",
        address: "",
        height: "",
        household_register: "",
        sex: 1,
        accompany: "",
        accompany_phone: "",
        entries:"",
        works: [],
        introduce:''
      },
      tips: {},
      err: {
        realname: 0,
        grade: 0,
        school: 0,
        // instructor: 0,
        // training_place: 0,
        phone: 0,
        address: 0,
        // height: 0,
        // household_register: 0,zzxxzxzc
        // sex: 0,
        // accompany: 0,
        // accompany_phone: 0,
        entries:0
      },
      match_item: {
        status: 1,
        me_sign_up_pay: 0,
        sign_field: {
          accompany: 0,
          accompany_phone: 0,
          address: 0,
          grade: 0,
          height: 0,
          household_register: 0,
          instructor: 0,
          phone: 0,
          realname: 0,
          school: 0,
          entries: 0,
          sex: 0,
          works:0,
          training_place: 0
        }
      },
      mechanism: {
        username: ""
      },
      fileList: [],
      queue_res: {
        queue_id: 0
      }, //已提交订单信息【包括支付信息】
      disabled: false, //提交状态防止重复提交
      isAndroid: 0,
      isIOS: 0,
      show_loading: true,
      query_data:{},
    };
  },
  computed: {
    check_disabled: {
      // getter
      get: function() {
        return this.match_item.status == 1 ? false : true;
      },
      // setter
      set: function(newValue) {}
    }

    //  function() {
    //     return this.match_item.status == 1 ? 3 : 1;
    //   }
  },

  components: {
    commonPage,
    matchInc
  },
  created() {
    let that = this;
    this.match_id = this.$route.params.match_id;
    this.mechanism_id = this.$route.params.mechanism_id | 0;
    
      var names = location.search; //获取url中"?"符后的字串  
      if(typeof(names)=='string'){
          names = [names];
      }
      var loca = window.location;
      var obj = {}
      var arr = loca.search.substr(1).split("&");
      //获取参数转换为object
      for(var i = 0; i < arr.length; i++) {
          arr[i] = arr[i].split("=");
          obj[arr[i][0]] = arr[i][1];
      };
      if(obj['sr']!='undefined'||obj['sr']!=''){
        delete obj['sr'];
      }
      //删除指定参数
      console.log(obj);
      console.log(names);
      for(var i = 0; i < names.length; i++) {
      console.log(names[i]);
      console.log(obj[names[i]]);
          //  delete obj[names[i]];
      }
      //重新拼接url
      var url = loca.origin + loca.pathname + "?" + JSON.stringify(obj).replace(/[\"\{\}]/g, "").replace(/\:/g, "=").replace(/\,/g, "&");
      this.share_url = url;
      console.log(url);
    //执行页面数据加载
    that.$axios.all([that.get_Match(1), that.get_Mechanism(1)]).then(
      that.$axios.spread(function(match_list, mechanism) {
        let sign_fields = that.match_item.sign_field;
        that.match_item = match_list.result.list;

        if (JSON.stringify(match_list.result.list.sign_field) != "{}") {
          for (let key in match_list.result.list.sign_field) {
            sign_fields[key] = match_list.result.list.sign_field[key];
          }
        }
        that.match_item.sign_field = sign_fields;
        that.mechanism = mechanism.result;
        // console.log(thisquery_data);
        console.log(url + '#' + location.href.split('#')[1]);
        console.log(82134526);
        that.$wxShare(
          {
            title: that.match_item.match_name+'正在报名......', // 分享标题
            desc: that.mechanism.username==''?that.match_item.match_introduce:that.mechanism.username, // 分享描述
            // link: encodeURI(window.location.href), // 分享链接
            link: location.href.split('#')[0] + '#' + location.href.split('#')[1],
            imgUrl: that.match_item.share_icon==''?'':that.match_item.share_icon
            //   debug:true
          },

          function() {
            //分享成功后的回调函数
          }
        );
        setTimeout(() => {
          that.show_loading = false;
        }, 100);
      })
    );

    // this.get_Match();
    var u = navigator.userAgent;
    this.isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //Android终端
    this.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //IOS终端
  },
  methods: {
    //验证表单
    
  GetRequest() {  
      var url = location.search; //获取url中"?"符后的字串  
      var theRequest = new Object();  
      if (url.indexOf("?") != -1) {  
        var str = url.substr(1);
        var strs = str.split("&");  
        for(var i = 0; i < strs.length; i ++) {  
            theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);  
        }  
      }  
      console.log(theRequest);
      console.log(11231231233);
      this.query_data = theRequest;
      console.log(this.query_data.m);
      console.log(this.query_data['m']);
      // return theRequest;  
  },
  funcUrlDel() {
      var names = location.search; //获取url中"?"符后的字串  
        if(typeof(names)=='string'){
            names = [names];
        }
        var loca = window.location;
        var obj = {}
        var arr = loca.search.substr(1).split("&");
        //获取参数转换为object
        for(var i = 0; i < arr.length; i++) {
            arr[i] = arr[i].split("=");
            obj[arr[i][0]] = arr[i][1];
        };
        if(obj['sr']!='undefined'||obj['sr']!=''){
          delete obj['sr'];
        }
        //删除指定参数
        console.log(obj);
        console.log(names);
        for(var i = 0; i < names.length; i++) {
        console.log(names[i]);
        console.log(obj[names[i]]);
            //  delete obj[names[i]];
        }
        //重新拼接url
        var url = loca.origin + loca.pathname + "?" + JSON.stringify(obj).replace(/[\"\{\}]/g, "").replace(/\:/g, "=").replace(/\,/g, "&");
        this.share_url = url;
        console.log(url);
    },
    verify_form() {
      let that = this;
      return {
        init() {
          this.check_from = Array();
          let i = 0;
          for (let key in that.err) {
            if (that.match_item.sign_field[key] == 0) {
              continue;
            }

            if (that.mechanism_id > 0 && key=='training_place') {
              continue;
            }

            //如果是后台指定的 则判断 否则不判断
            this.check_from[key] = this.ret_fun_name(key);
            console.log(this.check_from);
            if (i == 0) {
              that.check_from = this.check_from[key] == true ? true : false;
            } else {
              that.check_from =
                this.check_from[key] == true && that.check_from == true
                  ? true
                  : false;
            }

            if (that.err[key] == 1) {
              that.$refs["queue_" + key].focus();
              that.$toast({
                message: that.tips[key],
                position: "bottom"
              });
              break;
            }
            i++;
          }
        },
        ret_fun_name(name) {
          return eval("this." + name + "()");
        },
        realname() {
          if (that.queue.realname == "") {
            that.tips.realname = "请输入姓名";
            that.err.realname = 1;
            that.check_from = false;
            return false;
          }

          if (
            that.queue.realname !=
            that.queue.realname.match(/^[a-zA-Z\u4e00-\u9fa5]+$/gi)
          ) {
            that.tips.realname = "姓名格式不正确";
            that.err.realname = 1;
            console.log(that.err.realname);
            that.check_from = false;
            return false;
          }

          that.check_from = true;
          that.tips.realname = "";
          that.err.realname = 0;
          return true;
        },
        entries(){
          if (that.queue.entries == "") {
            that.tips.entries = "参赛曲目不能为空";
            that.check_from = false;
            that.err.entries = 1;
            return false;
          }

          that.check_from = true;
          that.tips.entries = "";
          that.err.entries = 0;
          return true;
        },
        grade() {
          if (that.queue.grade == "") {
            that.tips.grade = "年级不能为空";
            that.check_from = false;
            that.err.grade = 1;
            return false;
          }

          that.check_from = true;
          that.tips.grade = "";
          that.err.grade = 0;
          return true;
        },
        school() {
          if (that.queue.school == "") {
            that.tips.school = "请填写学校全称";
            that.err.school = 1;
            that.check_from = false;
            return false;
          }
          that.check_from = true;
          that.tips.school = "";
          that.err.school = 0;
          return true;
        },
        instructor() {
          if (that.queue.instructor == "") {
            that.tips.instructor = "请输入指导教师";
            // that.err.instructor = 1;
            that.check_from = false;
            return false;
          }
          that.check_from = true;
          that.tips.instructor = "";
          // that.err.instructor = 0;
          return true;
        },
        training_place() {
          if (that.queue.training_place == "") {
            that.tips.training_place = "请输入培训机构";
            // that.err.training_place = 1;
            that.check_from = false;
            return false;
          }
          that.check_from = true;
          that.tips.training_place = "";
          // that.err.training_place = 0;
          return true;
        },
        phone() {
          console.log(that.queue.phone);
          if (that.queue.phone == "") {
            that.tips.phone = "请输入联系电话";
            that.err.phone = 1;
            that.check_from = false;
            return false;
          }

          if (
            !that.isTel(that.queue.phone) &&
            !that.isMobil(that.queue.phone)
          ) {
            that.tips.phone = "联系电话格式不正确";
            that.err.phone = 1;
            that.check_from = false;
            return false;
          }

          that.check_from = true;
          that.tips.phone = "";
          that.err.phone = 0;
          return true;
        },
        address() {
          if (that.queue.address == "") {
            that.tips.address = "请输入家庭地址";
            that.err.address = 1;
            that.check_from = false;
            return false;
          }
          that.check_from = true;
          that.tips.address = "";
          that.err.address = 0;
          return true;
        },
        height() {
          if (that.queue.height == "") {
            that.tips.height = "请输入身高";
            // that.err.height = 1;
            that.check_from = false;
            return false;
          }
          that.check_from = true;
          that.tips.height = "";
          // that.err.height = 0;
          return true;
        },
        household_register() {
          if (that.queue.household_register == "") {
            that.tips.household_register = "请输入户籍";
            // that.err.household_register = 1;
            that.check_from = false;
            return false;
          }
          that.check_from = true;
          that.tips.household_register = "";
          // that.err.household_register = 0;
          return true;
        },
        sex() {
          if (that.queue.sex == "") {
            that.tips.sex = "请选择性别";
            // that.err.sex = 1;
            that.check_from = false;
            return false;
          }
          that.check_from = true;
          that.tips.sex = "";
          // that.err.sex = 0;
          return true;
        },
        accompany() {
          if (that.queue.accompany == "") {
            that.tips.accompany = "请输入您的陪同人员";
            // that.err.accompany = 1;
            that.check_from = false;
            return false;
          }
          that.check_from = true;
          that.tips.accompany = "";
          // that.err.accompany = 0;
          return true;
        },
        accompany_phone() {
          if (that.queue.accompany_phone == "") {
            that.tips.accompany_phone = "请输入陪同人员电话";
            // that.err.accompany_phone = 1;
            that.check_from = false;
            return false;
          }
          that.check_from = true;
          that.tips.accompany_phone = "";
          // that.err.accompany_phone = 0;
          return true;
        },
        //是否上传作品
        works() {
          console.log(11);
          if (that.fileList.length == 0) {
            that.$toast({
              message: "请上传作品！",
              position: "bottom"
            });
            that.check_from = false;
          } else {
            that.queue.works = [];
            that.fileList.forEach((item, i) => {
              //如果存在上传失败作品则提示重新上传
              if (item.status == "failed") {
                that.$toast({
                  message: "请重新上传传输失败作品再提交！",
                  position: "bottom"
                });
                that.check_from = false;
              }
              //如果存在未上传完成图片 则提示等待上传完成再提交
              if (item.status == "uploading") {
                that.$toast({
                  message: "请等待所有作品全部上传再提交！",
                  position: "bottom"
                });
                that.check_from = false;
              }
              that.queue.works.push(item.path);
            });
            console.log(that.queue.works);
            // that.check_from = true;
          }
        }
      };
    },
    isTel(s) {
      var reg = /^((0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/;
      if (!reg.test(s)) return false;
      return true;
    },
    isMobil(s) {
      var patrn = /^1[3456789]\d{9}$/;
      if (!patrn.exec(s)) return false;
      return true;
    },
    change_sex(ids, names) {
      let that = this;
      this.sex_options[0].forEach((element, index) => {
        if (ids[0] == element) {
          this.queue.sex = index + 1;
        }
      });
    },
    // 输入框获得焦点
    onFocus() {
      var that = this;
      this.bfscrolltop = document.body.scrollTop; // 记录当前位置
      if (this.isIOS) {
        setTimeout(function() {
          document.body.scrollTop = document.body.scrollTop * 1 + 200;
        }, 300);
      }
    },
    // 输入框失去焦点
    changeBlur() {
      var that = this;
      // input 输入框 内无内容的情况下点击ios软键盘的完成是可以回去的
      if (this.inputVal == "") {
        document.body.scrollTop = this.bfscrolltop;
      }
    },

    //提交数据
    submitQueue(e) {
      let that = this;
      e.preventDefault();
      if (this.disabled) {
        //防止重复提交
        return;
      }
      this.verify_form().init();
      if (this.match_item.sign_field.works==1) {
        this.verify_form().works();
      }
      if (!this.check_from) {
        
        return;
      }
      this.disabled = true;
      let param = {
        queue_id: that.queue_res.queue_id,
        matchid: that.match_id,
        queue: that.queue,
        mechanism_id: that.mechanism_id
      };

      this.$axios
        .post("match.submitQueue", param)
        .then(res => {
          console.log(res.status);
          console.log(res);
          console.log(param);
          console.log(this.queue);
          if (res.status == 1&&res.result.fee>0) {
            that.queue_res = res.result;
            that.qrueue_pay();
            //重置data
            Object.assign(this.result, this.$options.data());
          } else if (res.status == 0) {
            // this.$notify.error({
            //   title: "错误提示",
            //   message: res.result.message
            // });
            that.disabled = false;
            return false;
          } else if(res.status == 1 &&res.result.fee=='0.00'){
            console.log(123123);
            that.queue_res = res.result;
            console.log(that.url);
            window.location.href = that.url+
              // "#/match/match_detail/index/" + that.match_id;
              "#/pay/pay_success/index/" + that.queue_res.queue_id;
            // Object.assign(this.result, this.$options.data());
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //发起支付
    qrueue_pay() {
      let that = this;
      let pay_param = that.queue_res.pay_param;
      //关键代码，里面所填写的资料都是后台给你的，所以粘贴复制就行了
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: pay_param.appId, //公众号名称，由商户传入
          timeStamp: pay_param.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: pay_param.nonceStr, //随机串
          package: pay_param.package,
          signType: pay_param.signType, //微信签名方式
          paySign: pay_param.paySign //微信签名
        },
        function(res) {
          //我这里无论成功与否，都会跳转到我设置的页面中，且带了一个参数，用于跳转到原来的页面时给用户提示充值是否成功
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            console.log("支付成功");
            window.location.href = that.url+
              "#/pay/pay_success/index/" + that.queue_res.queue_id;
          } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
            console.log("取消支付");
            that.disabled = false;
            // window.location.href =
            //   "http://tdjl.kurongdashi.com/#/paycenter?qx=qx";
          } else {
            console.log("支付失败");
            that.disabled = false;
            // window.location.href =
            //   "http://tdjl.kurongdashi.com/#/paycenter?sb=sb";
          }
        }
      );
    },
    //获取最新比赛
    get_Match(init = 0) {
      let that = this;
      let obj = this.$axios({
        url: "match.getMatchList",
        method: "post",
        data: { match_id: this.match_id }
      });

      if (init == 1) {
        return obj;
      } else {
        obj
          .then(res => {
            that.match_item = res.result.list;
            console.log(JSON.stringify(res.result.list.sign_field));
            if (!JSON.stringify(res.result.list.sign_field) == "{}") {
              for (item in res.result.list.sign_field) {
                console.log(item);
                that.match_item.sign_field = res.result.list.sign_field;
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    }, //获取最新比赛
    get_Mechanism(init = 0) {
      let that = this;
      let obj = this.$axios({
        url: "match.getMechanism",
        method: "post",
        data: { mechanism_id: this.mechanism_id }
      });

      if (init == 1) {
        return obj;
      } else {
      }
    },
    oversize(file) {
      this.$toast({
        message: "最大支持10M的文件上传！",
        position: "bottom"
      });
    },
    // 返回布尔值
    beforeRead(file) {
      let result = true;
      if (!Array.isArray(file)) {
        if (file.type !== "image/jpeg" && file.type !== "image/png") {
          this.$toast({
            message: "请上传 jpg、png 格式图片",
            position: "bottom"
          });
          result = false;
        }
      } else {
        file.forEach(element => {
          if (element.type !== "image/jpeg" && element.type !== "image/png") {
            this.$toast({
              message: "请上传 jpg、png 格式图片",
              position: "bottom"
            });
            result = false;
          }
        });
      }

      return result;
    },
    //上传业务
    afterRead(files) {
      let _this = this;

      if (!Array.isArray(files)) {
        this.fileUpload(files);
      } else {
        files.forEach(element => {
          this.fileUpload(element);
        });
      }
    },
    beforeDelete() {
      console.log(121);
    },
    fileUpload(file) {
      let _file = file;

      _file.status = "uploading";
      _file.message = "上传中...";

      //创建表单
      var avatarData = new FormData();
      avatarData.append("file", file.file); //将图片加入上传表单

      var xhr = new XMLHttpRequest();
      xhr.open(
        "post",
        this.$axios.defaults.baseURL + "match.uploaderWorks",
        true
      );
      xhr.upload.onprogress = progressFunction; //【上传进度调用方法实现】
      xhr.onload = uploadComplete; //请求完成
      xhr.onerror = uploadFailed; //请求失败
      xhr.onreadystatechange = function() {
        //当readyState变化时执行 （作为上传结果不可靠）
      };
      //上传进度
      function progressFunction(evt) {
        // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
        if (evt.lengthComputable) {
          //vant框架这个没多大用处
          let complete = ((evt.loaded / evt.total) * 100) | 0;
          _file.upload_progress = complete;
        }
      }
      //上传成功响应
      function uploadComplete(evt) {
        //服务断接收完文件返回的结果
        if (evt.target.readyState == 4 && evt.target.status == 200) {
          var res = eval("(" + evt.target.responseText + ")");
          console.log(res);

          // file.url=res.result.url + "/" + res.result.imgs.file;
          _file.path = res.result.upload.path; //用于表单提交保存到数据库

          _file.status = "done";
          _file.message = "上传成功";
        } else {
          _file.status = "failed";
          _file.message = "上传失败";
        }
        // Toast("上传成功！");
      }
      //上传失败
      function uploadFailed(evt) {
        _file.status = "failed";
        _file.message = "上传失败";
      }
      //开始上传
      xhr.send(avatarData);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.page_body {
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 90%;
  margin-left: 5%;
  height: 100%;
  overflow: hidden;
  font-size: 0.7rem;

  .match_detail {
    margin-top: 0.5rem;

    .check_buttons {
      display: flex;
      justify-content: space-between;

      button {
        width: 32%;
        border: 0;
        border-top-left-radius: 0.3rem;
        border-top-right-radius: 0.3rem;
        height: 40px;
        background: #3333ff;
        color: #fff;
      }

      button[disabled] {
        background: #ccc;
      }

      button.active {
        background: white;
        color: #016dff;
      }
    }

    .match_detail_cont {
      background: white;
      min-height: 300px;
      border-bottom-left-radius: 0.3rem;
      border-bottom-right-radius: 0.3rem;
      padding: 0.5rem 0;

      .on_signed {
        text-align: center;
        padding: 1rem;

        div {
          margin-bottom: 1rem;
        }

        button {
          height: 2.2rem;
          line-height: 2.2rem;
          border-radius: 2.2rem;
          width: 100%;
          border: 1px solid #ccc;
          background: none;
        }
      }

      .article {
        margin: 1rem;
      }

      ul {
        list-style: none;

        li {
          margin: 1rem;

          label.err {
            border: 1px solid red;
          }

          label {
            border: 1px solid #eee;
            border-radius: 2.2rem;
            height: 2.2rem;
            padding-left: 1rem;
            display: flex;
            justify-content: space-between;
            height: 2.2rem;

            span {
              line-height: 2.2rem;
              font-size: 0.7rem;
            }

            input {
              border: 0;
              width: 70%;
              border-top-right-radius: 2.2rem;
              border-bottom-right-radius: 2.2rem;
            }

            .sex_select {
              width: 70%;
              border: 0;
            }
          }

          input[type=submit] {
            background: blue;
            border-radius: 2.2rem;
            height: 2.2rem;
            width: 100%;
            border: 0;
            color: #fff;
          }
        }

        .upload_input {
          padding-left: 1rem;

          span {
            width: calc(100% - 1rem);
            display: block;
            border-bottom: 1px solid #eee;
            margin-bottom: 0.4rem;
            font-size: 0.7rem;
            color: red;
          }
        }
      }
    }
  }
}
</style>
<style lang="stylus" >
.sex_select {
  .weui-cell {
    padding: 0;

    .weui-cell__hd {
      display: none;
    }

    .weui-cell__ft {
      display: none;
    }
  }

  div {
    width: 100%;

    div {
      width: 100%;

      .vux-cell-value {
        height: 2.2rem;
        width: 100%;
        line-height: 2.2rem;
      }
    }
  }

  .icon {
    height: 2.2rem;
    line-height: 2.2rem;
    font-size: 0.7rem;
    margin-right: 0.6rem;
  }
}
select{
  border-radius:20px;
  width:70%;
  background:white;
  border:none
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>